<style scoped>

</style>
<template>
    <div class="page-grouppay page-wrap" id="page-grouppay">
        <header-component :page-name="pageName"></header-component>
        <a href="javascript:;"  v-link="{path:'/address'}">
            <div class="group_pay_address">

                <i class="ifont">&#xe642;</i>
                <div class="addressContent">
                    <template v-if="data.delivery_address">
                        <p class="nowrap">{{data.delivery_address.username}}&nbsp;&nbsp;&nbsp;&nbsp;{{data.delivery_address.mobile}}</p>
                        <p>{{data.delivery_address.address}}</p>
                    </template>
                    <template v-else>
                        <p class="nowrap">暂无收货地址，点击设置</p>
                    </template>
                </div>
                <div><span class="w-bar-ext"><b class="ico-next"></b></span></div>
            </div>
        </a>

        <div class="group_pay_goods">
            <div class="goods_image"><img :src="data.product.main_image" /> </div>
            <div class="goods_Info">
                <p class=" goods_Info_contentTitle nowrap">{{data.product.main_title}}</p>
                <div class="group_good_price">

                    <span class="actually_price"><em>￥</em><i>{{data.product.price}}</i></span><del class="del_price">￥<em>{{data.product.origin_price}}</em></del>
                </div>
                <div class="group_good_counts">
                    <div class="count">购买数量</div>
                    <div class="calcCount"><span class="greyBac" data-change="-1">-</span><input id="group_number" type="number" data-min="1" data-max="1" data-val="1" disabled pattern="[0-9]*" value="1"><span class="greyBac" data-change="1">+</span></div>
                </div>
            </div>
        </div>

        <div class="group_pay_method">
            <p class="pay_title">付款方式</p>

            <div class="pay_method_choose" v-for="(k,i) in data.pay">
                <span>{{i.pay_title}}</span>
                <label  for="r4" :class="['v-radio','background_1',pay_type=='1'?'':'uncheck']"></label >
                <!--<input id="r4" type="radio" style="display: none;"  v-model="pay_type"   name="paytype">-->
            </div>

        </div>
        <div class="group_goPay">
            <span data-total :data-price="data.product.price">实付款:￥<em>{{data.total_price}}</em></span>
            <span>免运费</span>
            <a href="javascript:;" data-sub @click="pay">提交订单</a>
        </div>
    </div>
    <pop :status-pop="statusPop" :status-toast="statusToast" :msg="msg" >
        <a v-if="btnType==0" href="javascript:;" @click="back">确定</a>
        <a v-if="btnType==1" href="javascript:;" v-link="{path:'/address'}">确定</a>
    </pop>
</template>
<script>
    import Weixin from '../libs/wxShare'
    import User from '../module/user'
    import pop from '../components/pop'
    import headerComponent from '../components/header'
//    import Config from '../config/config'
    module.exports = {
        data() {
            return {
                data:{},

                address:null,
                shopCount:1,
                pay_type:'1',//支付方式  1 在线支付
                buyType:'',
                g_number:'',
                isWeixin:Weixin.isWeixin,
                id:'', //商品id
                tuanid:'',
                statusPop:false,
                statusToast:false,
                msg:'',

                pageName:'拼团支付',
                btnType:0,   //0 关闭弹窗 1 跳转收货地址编辑页
            }
        },
        components: {
            pop,
            headerComponent
        },

        created(){

            this.$dispatch('isLoading', true);

        },

        async ready() {
            if (!this.isWeixin) {

                this.statusPop=true;
                this.msg='本页面需在微信环境下使用'

            } else {

                if(!this.$route.query.id||!this.$route.query.buyType){

                    this.$router.replace({path:'/home'});
                    return ;

                }

                this.id = this.$route.query.id;

                this.buyType = this.$route.query.buyType;

                this.tuanid = this.$route.query.g_id;

                let res = await User.checkoutPay(this.buyType,this.id);

                if(res.status==200){

                    if(res.data.delivery_address&&res.data.delivery_address.username&&res.data.delivery_address.mobile&&res.data.delivery_address.address){

                        this.address=res.data.delivery_address;

                    }else{

                        this.address=null;

                    }

                    if(!this.tuanid) this.tuanid=res.data.tuanid;

                    this.g_number=res.data.product.join_num;

                    this.data=Object.assign({},this.data,res.data);

                }else{

                    this.statusPop=true;
                    this.msg=res.msg;
                    this.btnType=0;
                }
            }

            this.$dispatch('isLoading', false);

        },
        beforeDestroy() {

        },
        methods: {
            back(){
                this.statusPop=false;
                this.$router.replace({path:'/home'})
            },
            async pay(){
                if(!this.address){
                    this.statusPop=true;
                    this.msg='请填写收货地址';
                    this.btnType=1;
                }else if(this.shopCount<1){
                    this.statusPop=true;
                    this.msg='商品数量不能小于1';
                    this.btnType=0;
                }else if(!this.pay_type){
                    this.statusPop=true;
                    this.msg='支付方式不可为空';
                    this.btnType=0;
                }else{
                    let res = await User.createOrder(this.tuanid,this.id,this.buyType,this.g_number);
                    if(res.status==200){
                        window.location.href = Config.apiDomain + '/grouporder/pay?token=' + User.token + '&o_id=' + res.data.code;
                    }else{
                        this.statusPop=true;
                        this.msg=res.msg;
                        this.btnType=0;
                    }
                }
            }
        }
    }
</script>
